<template>
  <el-row :gutter="10" type="flex" class="container">
    <el-col :span="16" class="left-bg" :style="bgUrls[index]">
      <div class="inter">
        <div class="icon">
          <img src="@/assets/Logo.svg" alt="" height="100%" />
        </div>
        <div class="text-c-white">
          <h1>无人船巡航管理后台</h1>
          <h5 class="text-c-white f-large f-w-200">
            基于高精度智能巡航的水质监测采样无人船，通过电子地图的显示和无人船的定位进行水质的监测和取样。
          </h5>
        </div>
      </div>
    </el-col>
    <el-col :span="8" class="right-main">
      <div class="icon m-b-20">
        <i class="fa fa-user" aria-hidden="true"></i>
      </div>
      <h2 class="f-w-400 m-y-10">{{ greet }}</h2>
      <el-form ref="formLogin" label-position="top" :rules="rules" :model="formLogin" style="width: 80%">
        <el-form-item prop="username">
          <el-input v-model="formLogin.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="formLogin.password" placeholder="请输入密码" show-password
            @keyup.enter.native="submitForm"></el-input>
        </el-form-item>
      </el-form>
      <div class="text-center">
        <el-button type="primary" @click="submitForm">登录</el-button>
        <p class="m-t-10 f-small text-c-gray">Copyright © 2023</p>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Login",
  data() {
    // 自定义校验器，自定义回调写入抛错时候能够避免校验器警告。
    var validate = (rule, value, callback) => {
      if (value.trim() === "") {
        return callback(new Error("输入不能为空"));
      } else {
        callback();
      }
    };
    return {
      formLogin: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: validate, trigger: "blur" }],
        password: [{ validator: validate, trigger: "blur" }],
      },
      greet: "早上好,管理员！",
      index: 1,
      bgUrls: [
        {
          backgroundImage:
            "url(" + require("@/assets/login-backgroud/morning.jpg") + ")",
        },
        {
          backgroundImage:
            "url(" + require("@/assets/login-backgroud/afternoon.jpg") + ")",
        },
        {
          backgroundImage:
            "url(" + require("@/assets/login-backgroud/evening.jpg") + ")",
        },
      ],
    };
  },
  methods: {
    // 登录
    login() {
      let target = this.$route.query.redirect || "/cruisemanagement";
      let userData = this.formLogin;
      this.$store
        .dispatch("userHandle/toUserLogin", userData)
        .then(() => {
          this.$router.push({ path: target });
        })
        .catch((err) => {
          this.$Notify("账户或者密码错误！", err);
        });
    },
    // 表单验证
    submitForm() {
      this.$refs['formLogin'].validate((valid) => {
        if (valid) {
          this.login();
        } else {
          return false;
        }
      });
    },
  },
  mounted() {
    let now = new Date().getHours();
    if (now > 3 && now <= 12) {
      this.index = 0;
      this.greet = "早上好，管理员。";
    } else if (now > 12 && now <= 18) {
      this.index = 1;
      this.greet = "中午好，管理员。";
    } else {
      this.index = 2;
      this.greet = "晚上好，管理员。";
    }
  },
};
</script>

<style scoped lang="less">
.container {
  min-height: 100vh;
  margin: 0px !important;

  .left-bg {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;

    &:after {
      content: "";
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      z-index: 10;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .inter {
      position: absolute;
      z-index: 20;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80%;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%);

      .icon {
        height: 120px;
        margin-right: 10px;
      }

      h1 {
        font-size: 50px;
      }
    }
  }

  .right-main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    text-align: center;

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 60px;
      height: 60px;
      box-sizing: border-box;
      border-radius: 50%;
      background: linear-gradient(-135deg, #1de9b6 0%, #1dc4e9 100%);
      color: #fff;
      font-size: 30px;
      box-shadow: 0px 2px 10px rgb(158 247 225 / 80%),
        0px 5px 50px rgb(158 247 225 / 80%), 0px 8px 80px rgb(158 247 225 / 60%),
        0px 8px 120px rgb(158 247 225 / 60%);
    }
  }
}
</style>